<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>ajax代替地址栏请求页面</h1>
</body>
</html>
<script>

    // 1、创建一个ajax对象
    let xhr=new XMLHttpRequest()
    // console.log(xhr.readyState,1111111);//0  没有初始化

    // 2、创建一个请求连接（要请求哪个接口的数据）
    // 本地请求只可以是get的形式(并且需要有本地服务器)
    // ajax请求真正的服务器，必须同源，不能跨域(要么同源，要么解决跨域)
    xhr.open("get","./data/persons.json")
    // console.log(xhr.readyState,22222222222222222);//1

    // 3、发送请求
    xhr.send()
    // console.log(xhr.readyState,3333333333);//1



    // 4、获取数据
    // 发送请求，服务处理并响应，这需要一个过程
    // 当我们遇到未来会发生的一件事，但是不知道什么时候发生
    // 此时，我们会等待 ==》监听 readystatechange ajax的请求状态
    xhr.onreadystatechange=function(){
        // console.log(xhr.readyState,444444444);
        // - 0：请求未初始化，还没有调用open
        // - 1：请求已经建立，但是还没有发送send 
        // - 2：请求已经发送(后端已经接收到请求了) 
        // - 3：请求正在处理中，通常响应中已经有部分数据可以用了 
        // - 4：响应已经完成，可以获取并使用服务器的响应 

        // 5、当响应【完成】并且响应成功（http请求的状态码为200），就可以接收数据
        // if(xhr.readyState==4){

        if(xhr.readyState==4 && xhr.status==200){
              // 接收结果：xhr.responseText 结果会以文本的形式呈现
            console.log(xhr.responseText,55555);
            console.log(JSON.parse(xhr.responseText));

        }
    }




</script>